<template>
	<QList class="lexmis-Menu">
		<MenuInnerRecursion
			v-for="(item,index) in mappedData"
			:key="index"
			:data="item"/>
	</QList>
</template>

<script>
import MenuInnerRecursion from './MenuInnerRecursion';
import {
	QList
} from 'quasar';

/**
 * @author 唐国雄
 * 菜单
 * 属性----------------------
 * :data		菜单数据,{name:<string>,icon:<string>,children:<Array>,route:<string>}
 * :name-attr	重命名name字段
 * :icon-attr	重命名icon字段
 * :children-attr	重命名children字段
 * :route-attr		重命名route字段
 */
export default {
	name:'Menu',
	components:{
		MenuInnerRecursion,
		QList,
	},
	props:{
		data:{
			type:Array,
			default(){
				return [];
			}
		},
		nameAttr:{
			type:String,
			default:'name'
		},
		iconAttr:{
			type:String,
			default:'icon'
		},
		childrenAttr:{
			type:String,
			default:'children'
		},
		routeAttr:{
			type:String,
			default:'route'
		},
	},
	computed:{
		mappedData(){
			const {nameAttr,iconAttr,childrenAttr,routeAttr}=this;
			const getNewArr=(arr,parent) => {
				return arr.map(function(ele){
					const {
						[nameAttr]:name,
						[iconAttr]:icon,
						[childrenAttr]:children,
						[routeAttr]:route,
					}=ele;
					const newELe={
						name,
						icon,
						parent,
					};
					if(children){
						newELe.open=false;
						newELe.children=getNewArr(children,newELe);
					}else if(route){
						newELe.route=route;
					}
					return newELe;
				},this);
			};
			return getNewArr(this.data);
		}
	},
	created(){
		const path=this.$route.path;
		const loop=(tree) => {
			for(let {route,children,parent} of tree){
				if(children){
					loop(children);
				}else if(route&&this.$router.resolve(route).route.path===path){
					while(parent){
						parent.open=true;
						parent=parent.parent;
					}
				}
			}
		};
		loop(this.mappedData);
	}
};
</script>

<style lang="scss">
@import "../../../styles/quasar.variables";
.lexmis-Menu{
	.lexmis--active{
		&.q-item{
			background:$light-blue-1;
			color:$primary;
		}
	}
}
</style>
